<template>
  <div :class="['InformationItemView']" @click="clickHandler()">
    <div class="view">
      <div class="leftDiv">
        <div class="imgdiv fangda_div">
          <img :src='msg.imgUrl' class="fangda_E" :alt="msg.imgAlt" :title="msg.imgTitle">
        </div>

      </div>
      <div class="rightDiv">
        <div class="time">{{getTimeStrhandler(msg.uptime)}}</div>
        <div class="line"></div>
        <div v-html="msg.title" class="title"></div>
        <div v-html="jieTxtFun(decodeURIComponent(msg.contents).replace(/<[^>]*>/g, ''),90)" class="txt"></div>
        <div class="laiy">
          <img src="img/zix/4.png">
          <div class="txt">文章来源：{{msg.source}}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.InformationItemView{
  height: 265px;background: #FFFFFF;box-shadow: 0px 4px 30px 5px rgba(0,0,0,0.04);cursor: pointer;
  width: 100%;max-width: 1200px;
}

.InformationItemView *{

}

.fangda_div{
  overflow:hidden;
}

.InformationItemView:hover{
    .leftDiv .imgdiv img{
      transform: scale(1.1); /* 放大至1.1倍原大小 */
    }
    .rightDiv .title{
      color: #8EB040;
    }
}

.view{
  display:flex;display: -webkit-flex;flex-direction:row;position: relative;padding: 30px;
}
.leftDiv{
  position: relative;
}
.leftDiv .imgdiv{
  position: relative;
}
.leftDiv .imgdiv img{
  position: relative;cursor: pointer;width: 270px;height: 202px;
}
.rightDiv{
  position: relative;padding-left: 50px;    width: 850px;
}
.rightDiv *{
  text-align: left;white-space: nowrap;
}
.rightDiv .time{
  font-weight: normal;font-size: 16px;color: #B1B1B1;line-height: 50px;
}
.rightDiv .line{
  width: 32px;height: 2px;background: #84AE4C;border-radius: 1px;
}
.rightDiv .title{
  font-size: 24px;color: #2C483A;line-height: 78px;width: 100%;word-wrap: break-word; /* 允许在长单词或URL中间断换行 */
  overflow-wrap: break-word; /* 同上，这是word-wrap的替代属性 */
}
.rightDiv .txt{
  font-size: 14px;color: #6F6F6F;line-height: 40px;width: 100%;overflow-wrap: break-word;  /* 标准属性 */
}
.rightDiv .laiy{
  display:flex;display: -webkit-flex;flex-direction:row;color: #b1b1b1;    margin-top: 15px;
}
.rightDiv .laiy .txt{
  line-height: 22px;
}
.rightDiv .laiy img{
  width: 20px;height: 20px;padding-right: 10px;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";
import {useRouter} from "vue-router";
let msgref=defineProps({
  msg: {
    type: Object,
    default: {
      id:Enum.no_num,
      channelId:Enum.no_num,
      title:'普通人创业做烤肉加盟怎么样?',
      contents:'近年，烤肉行业依然是餐饮创业者的首选......',
      uptime:0,
      imgAlt:'',
      imgTitle:'',
      imgUrl:"http://oss-alibaba.shankuishuo.com/shankuishuo/prod/contentimg/d2a2619455160e361c0fb30f074c01a2.png",
      orderNum:0,
      subChannelId:0,
      threeChannelId:0
    },
  },
});
let store = useStore();
let router = useRouter();

onMounted(() => {
  //console.log("InformationItemView onMounted 初始化");

});

let jieTxtFun=(str,len)=>{
  if(str==null)str="";
  str=str.replace(/<[^>]+>/g, '');
  // console.log("CarUtil interceptCharacter",str);
  let i=0;
  let _end=0;
  let _len=0;
  for (i = 0; i < str.length; i++)
  {

    if(str.charCodeAt(i)>10000){
      _len+=2;
    }else{
      _len+=1;
    }
    if(_len<=len){
      _end++;
    }

  }
  if(_end<1)_end=1;
  let _str="";
  for (i = 0; i < _end; i++)
  {
    _str+=str.charAt(i);
  }
  if(_str.length<str.length)_str=_str+"...";
  return _str;
}

onBeforeUnmount(() => {
  console.log('InformationItemView onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("InformationItemView onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');

let clickHandler=()=>{
 // console.log('InformationItemView clickHandler',msgref.msg.channelId);
  if(msgref.msg.channelId==Enum.cId_1){
    store.commit('updatePages',Enum.ppzixuPath);

    setTimeout(()=>{
      //console.log('InformationItemView clickHandler 123 setTimeout==================',msgref.msg.id);
      store.state.pinpZxRouterData.url=Enum.zixu_details;
      store.state.pinpZxRouterData.data={id:msgref.msg.id,channelId:msgref.msg.channelId}
      store.state.pinpZxRouterData.status++;
    },200);

  }
  if(msgref.msg.channelId==Enum.cId_6){
    store.state.pinpZxRouterData.url=Enum.zixu_details;
    store.state.pinpZxRouterData.data={id:msgref.msg.id}
    store.state.pinpZxRouterData.status++;
  }



}


let getTimeStrhandler=(str)=>{
  return Util.getTimeStr(str);
}
</script>
